<template>
  <div class="window">
    <!--轮播图-->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../../../assets/Recommend/lunbodazao.png" alt=""></div>
        <div class="swiper-slide"><img src="../../../assets/Recommend/lunbodazao.png" alt=""></div>
        <div class="swiper-slide"><img src="../../../assets/Recommend/lunbodazao.png" alt=""></div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <!---->
    <div class="shout">
      <img src="../../../assets/Recommend/laba.png" alt="">
      新品上市 促销大庆
    </div>
    <!---->
    <div class="towing">
      <router-link :to="{name: 'prompt'}">
        <img src="../../../assets/Recommend/xianshiduanhuo.png" alt="">
      </router-link>
    </div>
    <div class="towong">
      <img src="../../../assets/Recommend/jingpin.png" alt="">
      <img src="../../../assets/Recommend/chaozhiremai.png" alt="">
    </div>
    <div class="dayreco"></div>
    <!--今日推荐-->
    <div class="thisday">
      <img src="../../../assets/Recommend/rili.png" alt="">
      今日推荐
    </div>
    <img src="../../../assets/Recommend/lunbo_xunli.png" alt="" id="daimg">
    <div class="kouhon">
      <div class="kou" v-for="item in istuns">
        <router-link :to="{name: 'product', params: {productImg: item.img, productPrice: 10, isPrice: item.price, isTxt: item.name, wid: item.ID}}">
          <img :src="item.img" alt="">
        </router-link>
        <p>{{item.name}}</p>
        <p>{{item.price}}</p>
      </div>
    </div>
    <!--xia-->
    <div class="dayreco"></div>
    <img src="../../../assets/Recommend/lunbo_xunli.png" alt="" id="daimg">
    <div class="kouhon">
      <div class="kou" v-for="item in istuns">
        <router-link :to="{name: 'product', params: {productImg: item.img, productPrice: 10, isPrice: item.price, isTxt: item.name, wid: item.ID}}">
          <img :src="item.img" alt="">
        </router-link>
        <p>{{item.name}}</p>
        <p>{{item.price}}</p>
      </div>
    </div>
    <div class="ponetin">注意:以上只是效果图</div>
    <my-footer></my-footer>
  </div>
</template>
<script>
  import * as $ from 'jquery'
  import * as Swiper from 'swiper'
  import "../../../../node_modules/swiper/dist/css/swiper.css";
  import MyFooter from '../MyFooter/MyFooter.vue'
  import Vue from 'vue'
  export default {
    data() {
      return{
        istuns:[]
      }
    },
    components: {
      MyFooter
    },
//    轮播图
    mounted() {
      new Swiper['default']('.swiper-container', {
        loop: true,
        autoplay:true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
      });
      this.doGet();
    },
    methods: {
      doGet() {
        Vue.axios.get('/goods/recommend').then((response) => {
          this.istuns = response.data;
        })
      }
    }
  }
</script>
<style scoped>
  .window {
    overflow: hidden;
  }
  .swiper-container {
    height: 15rem;
  }
  .swiper-container img {
    width: 100%;
    height: 100%;
  }
  .shout {
    width: 100%;
    height: 3rem;
    font-size: 1.7rem;
    font-weight: 300;
    color: #4d4d4d;
    padding-top: 0.75rem;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 0.5rem;
  }
  .thisday img,
  .shout img {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 1rem;
    margin-right: 0.5rem;
  }
  .towing {
    display: inline-block;
    width: 14.5rem;
    border-right: 1px solid #cccccc;
  }
  .towong img,
  .towing img {
    width: 100%;
  }
  .towong {
    display: inline-block;
    margin-right: 0.5rem;
    float: right;
    width: 16rem;
  }
  .dayreco {
    width: 100%;
    height: 1rem;
    background: rgb(242, 242, 242);
    border-top: 1px solid #cccccc;
    margin-top: 0.5rem;
  }
  .thisday {
    width: 100%;
    height: 3rem;
    font-size: 1.7rem;
    font-weight: 300;
    color: #4d4d4d;
    padding-top: 0.75rem;
    margin-bottom: 0.5rem;
  }
  #daimg {
    width: 100%;
  }
  .kouhon {
    display: flex;
    justify-content: space-around;
  }
  .kouhon img {
    width: 3.75rem;
    height: 7.62rem;
  }
  .kou {
    text-align: center;
    font-size: 1.2rem;
  }
  .kou p:nth-child(3) {
    color: red;
  }
  .ponetin {
    margin-top: .5rem;
    font-size: 1rem;
    background: rgb(242, 242, 242);
    height: 2.5rem;
    line-height: 3rem;
    margin-bottom: 6rem;
    color: red;
    padding-left: 2rem;
  }
</style>
